import './TopMenu.scss';

import * as React from 'react';
import { connect } from 'react-redux';
import { logout } from '../auth/myAuthAction';

interface IMenuItem {
  name: string;
  path: string;
}

interface IProps {
  items: IMenuItem[];
  logout: any;
}

const TopMenu = ({ items, logout }: IProps) => (
  <div className='top-menu clearfix'>
    <ul className='left'>
      {
        items.map(
          item => (
            <li key={item.name}>
              <a href={item.path}>{item.name}</a>
            </li>
          )
        )
      }
    </ul>
    <div className='right'>
      <button onClick={logout}>登出</button>
    </div>
  </div>
)

const mapStateToProps = (state: any) => ({
  items: [
    {
      name: '首页',
      path: '#/'
    },
    {
      name: '顾客',
      path: '#/customer'
    },
    {
      name: '营销',
      path: '#/'
    },
    {
      name: '库存',
      path: '#/'
    },
    {
      name: '订单',
      path: '#/'
    },
    {
      name: '设置',
      path: '#/'
    },
    {
      name: '报表',
      path: '#/report'
    },
  ]
})

const mapDispatchToProps = (dispatch: any) => ({
  logout: () => dispatch(logout())
})

export default connect(mapStateToProps, mapDispatchToProps)(TopMenu)
